<template>
  <el-dialog :visible.sync="dialogVisible" :append-to-body="true" title="编辑"
             width="50%" @open="open">
    <good-search-dialog v-model="searchDialogVisible" @select="searchGoodChange"/>
    <el-row :gutter="40">
      <el-col :span="24">
        <el-card>
          <produce-item-rich-text :data="data"/>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="40" style="margin-top: 20px;">
      <xum-title title="链接地址" style="margin-left: 20px;"/>
      <el-col :span="8">
        <el-radio-group v-model="linkType" style="margin: 10px 0 0 15px;">
          <el-radio :label="1">商品（推荐）</el-radio>
          <el-radio :label="2">链接</el-radio>
        </el-radio-group>
      </el-col>
      <el-col :span="16">
        <div style="padding: 0 14px">
          <el-input v-model="linkGoodText" size="small" v-if="linkType === 1" :disabled="true"
                    placeholder="点击搜索按钮搜索商品">
            <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer"
               @click="openSearchDialog"/>
          </el-input>
          <el-input v-model="link" size="small" v-if="linkType === 2" :disabled="linkType !== 2"
                    placeholder="输入完整链接地址，如 http://www.baidu.com/search?type=default"/>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="40" style="margin-top: 20px;">
      <el-col :span="8">
        <xum-title title="顺序号" :title-span="24"/>
        <el-row :gutter="0">
          <!--suppress HtmlDeprecatedAttribute -->
          <el-col :span="24" align="center">
            <el-input-number size="small" v-model="sortNumber" placeholder="循序号，小数在前"/>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="16">
        <xum-title title="备注" :title-span="24"/>
        <div style="padding: 0 14px">
          <el-input size="small" v-model='remark' placeholder="备注信息"/>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="40" style="margin-top: 20px;">
      <el-col :span="24">
        <xum-title title="文本内容" :title-span="24"/>
        <el-input type="textarea" placeholder="请输入文本信息" v-model="textContent"
                  :autosize="{ minRows: 6, maxRows: 6}"/>
      </el-col>
    </el-row>
    <span slot="footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button @click="resetDialog">重置</el-button>
        <el-button @click="handleSubmit" :loading="submitLoading" type="primary">提交</el-button>
    </span>
  </el-dialog>
</template>

<script>
import XumTitle from '@/components/XumTitle'
import { queryGoodDetailByIdStore } from '@/api/ApiGoodDetail'
import { ResultCode } from '@/constants/constants'
import GoodSearchDialog from '@pages/goods/part/GoodSearchDialog'
import { changeGoodProduceById } from '@/api/ApiGoodProduce'
import GoodProduceUpdateDTO from '@/api/entity/GoodProduceUpdateDTO'
import ProduceItemRichText from '@pages/goods/part/pageGoodProduce/part/produceItem/ProduceItemRichText'
export default {
  name: 'GoodProduceRichTextEditDialog',
  components: { ProduceItemRichText, GoodSearchDialog, XumTitle },
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    goodId: {
      required: true,
      type: [Number, String]
    },
    data: {
      required: true,
      type: Object
    }
  },
  model: {
    prop: 'visible',
    event: 'visible'
  },
  data () {
    return {
      searchDialogVisible: false,
      submitLoading: false,
      dialogVisible: false,
      linkType: 1,
      link: '',
      linkGoodId: 0,
      searchGood: null,
      sortNumber: 0,
      remark: '',
      textContent: ''
    }
  },
  computed: {
    linkGoodText () {
      return this.searchGood && this.linkGoodId && this.linkGoodId > 0 ? this.searchGood.name : ''
    }
  },
  methods: {
    /**
       * 对话框开启拦截
       */
    open () {
      this.resetDialog()
    },
    /**
       * 关闭对话框
       */
    closeDialog () {
      this.dialogVisible = false
    },
    /**
       * 重置数据
       */
    resetDialog () {
      if (this.data) {
        this.searchDialogVisible = false
        this.submitLoading = false
        if (this.data.linkUrl) {
          this.linkType = 2
          this.link = this.data.linkUrl
          this.linkGoodId = 0
        } else if (this.data.linkGoodId && this.data.linkGoodId > 0) {
          this.linkType = 1
          this.link = ''
          this.linkGoodId = this.data.linkGoodId
          if (!this.searchGood || this.searchGood.id !== this.linkGoodId) {
            queryGoodDetailByIdStore(this.linkGoodId, data => {
              if (data && data.code === ResultCode.OK) {
                this.searchGood = data.object
              }
            })
          }
        }
        this.sortNumber = this.data.sortNumber
        this.remark = this.data.remark
        this.textContent = this.data.content
      } else {
        this.$message.error('数据不能为空')
        this.dialogVisible = false
      }
    },
    /**
       * 提交数据
       */
    handleSubmit () {
      if (!this.data) {
        this.$message.error('数据不能为空')
        return
      }
      const params = GoodProduceUpdateDTO.instance()
      params.setId(this.data.id)
      params.setSortNumber(this.sortNumber)
      params.setRemark(this.remark)
      params.setLinkUrl(this.link)
      params.setLinkGoodId(this.linkGoodId)
      params.setContent(this.textContent)
      this.submitLoading = true
      changeGoodProduceById([params], data => {
        if (data && data.code === ResultCode.OK) {
          this.$message.success('修改数据成功')
          this.$emit('change')
          this.dialogVisible = false
        }
      }, () => {
        this.submitLoading = false
      })
    },
    /**
       * 打开上商品搜索对话框
       */
    openSearchDialog () {
      this.searchDialogVisible = true
    },
    /**
       * 选择商品改变
       */
    searchGoodChange (val) {
      if (val && val.id) {
        this.searchGood = val
        this.linkGoodId = val.id
      } else {
        this.searchGood = null
        this.linkGoodId = 0
      }
    }
  },
  watch: {
    dialogVisible (val) {
      this.$emit('visible', val)
    },
    visible (val) {
      if (this.dialogVisible !== val) {
        this.dialogVisible = val
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .img{
    padding: 0;
    margin: 0;

    img{
      width: 100%;
    }
  }
</style>
